<template>
	<div id="home">
		<div id="head">
			<img style="height: 56px; width: 144px;" src='../assets/美食地图logo.jpg' @click="gohome()"/>
			<div id="headr">
				<el-button type="warning" @click="gorecommend()">找你想吃</el-button>
				<img style="height: 48px; width: 48px;" src='../assets/美食地图logo.jpg' />
				<p>{用户名}</p>
				<el-button icon="ArrowLeftBold" circle  @click="out()"/>
			</div>
		</div>

		<div id="body">
			<div id="guanggao">
				<img src="../assets/tu1.png" alt="" />

				<p @click="godetails(item.id)" v-for="item in bestShop" >
					<el-icon >
						<LocationFilled />
					</el-icon>
					{{ item.name }}
				</p>
			

			</div>

			<div id="xiaoguanggao">
				<img src="../assets/广告位招租.png" alt="">
			</div>

			<h1>餐厅推荐</h1>

			<div id="tuijian">
				<div id="tfor" v-for="restaurant in 24" @click="godetails()">
					<img src="../assets/tu1.png" />
					<p>{名称} <span>{4.5}</span> </p>
					<p>{地点}
						<span style="float: right;color: lightgray;">查看详情
							<el-icon>
								<ArrowRight />
							</el-icon>
						</span>
					</p>
				</div>
			</div>

			<div id="xiaoguanggao">
				<img src="../assets/广告位招租.png" alt="">
			</div>

			<div id="foot">
				<p>这是页面底部</p>
				<p>遵纪守法好公民，代码开源好码农</p>
			</div>
		</div>


	</div>
</template>

<script setup>
  import axios from 'axios';
	import {
		Search,
		CloseBold
	} from '@element-plus/icons-vue';
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';
	import {
		useRouter
	} from 'vue-router'

	const router = useRouter()
	const search_input = ref('')
  const bestShop =ref()


	function godetails(id) {
		router.push({
			name: 'Details',
			query:{shopid:id}
		})
	}

	function gohome() {
		router.push({
			name: 'Home'
		})
	}

	function gorecommend() {
		router.push({
			name: 'Recommend'
		})
	}

	function out() {
		router.push({
			name: 'Login'
		})
	}

	onMounted(() => {
 
        const response =  axios.get(
            "http://localhost:8081/Shop/getPage?pageNum=1&pageSize=5&isAll=0&adrr"
        ).then(res=>{
					bestShop.value = res.data.data
				})
				
        console.log(bestShop)
});
</script>

<style scoped>
	#home {
		height: 100vh;
		width: 100vw;
		background: url('../assets/美食地图.jpg') no-repeat;
		background-size: cover;
		/* display: flex; */
		justify-content: center;
		align-items: center;

		#head {
			position: fixed;
			top: 0;
			height: 64px;
			width: 100%;
			background-color: rgba(255, 255, 255, 0.9);
			justify-content: space-between;
			display: flex;
			box-shadow: 0px 2px 2px gray;
			z-index: 1000;

			img {
				padding: 4px;
				border-radius: 10px;
				cursor: pointer;
			}

			#headr {
				height: 100%;
				width: 360px;
				display: flex;
				align-items: center;

				* {
					display: inline-block;
				}

				img {
					border-radius: 50%;
					padding: 0 16px;
				}

				p {
					width: 128px;
					overflow: hidden;
					padding: 0 16px;
				}
			}
		}

		#body {
			width: 100%;
			height: 100%;
			overflow: auto;

			* {
				margin: 0 auto;
			}

			#guanggao {
				width: 1120px;
				height: 640px;
				margin: 80px auto;
				padding: 8px;
				background-color: lightblue;
				position: relative;
				overflow: hidden;

				img {
					width: 100%;
					height: 100%;
				}

				p {
					color: orange;
					font-size: 24px;
					font-family: cursive;
					font-weight: 900;
					cursor: pointer;
				}

				p:hover {
					color: orangered;
					font-size: 28px;
				}

				p:nth-of-type(1) {
					position: absolute;
					top: 160px;
					left: 240px;

				}

				p:nth-of-type(2) {
					position: absolute;
					top: 200px;
					left: 800px;

				}

				p:nth-of-type(3) {
					position: absolute;
					top: 400px;
					left: 400px;

				}

				p:nth-of-type(4) {
					position: absolute;
					top: 300px;
					left: 280px;

				}

				p:nth-of-type(5) {
					position: absolute;
					top: 280px;
					left: 660px;

				}
			}

			#xiaoguanggao {
				width: 1120px;
				height: 160px;
				margin: 20px auto;
				background-color: red;

				img{
					width: 100%;
					height: 100%;
				}
			}

			h1 {
				width: 1120px;
				margin: 20px auto;
				line-height: 80px;
				font-size: 80px;
				font-weight: 900;
				text-align: center;
				font-family: cursive;
				border-bottom: solid 10px lightblue;
			}

			#tuijian {
				width: 1120px;
				height: 640px;
				overflow: auto;
				display: grid;
				grid-template-columns: 1fr 1fr 1fr 1fr;
				grid-gap: 20px 20px;
				margin-bottom: 80px;

				#tfor {
					width: 100%;
					height: 300px;
					border-radius: 10px;
					background-color: white;
					overflow: hidden;
					cursor: pointer;

					img {
						width: 100%;
						height: 200px;
					}

					p {
						padding: 8px 0;
					}

					p:nth-of-type(1) {
						font-size: 24px;
					}
				}

				#tfor:hover {
					border-bottom: solid 1px rgba(255, 255, 255, 0.1);
				}
			}
		}

		#foot {
			width: 100%;
			height: 160px;
			background-color: lightblue;
			box-shadow: 0px -2px 2px lightblue;

			p {
				text-align: center;
			}

			p:nth-of-type(1) {
				line-height: 128px;
				font-size: 32px;
			}

			p:nth-of-type(2) {
				line-height: 32px;
				font-size: 16px;
				font-family: cursive;
				background-color: white;
			}
		}
	}
</style>